<!DOCTYPE HTML >
<html>
    <head>
        <title>
            背景
        </title>
        <meta charset='utf-8'>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
        <style type='text/css'>
            *{
                background: #efff9d;
            }
            #image{
                background-image: url("../img/image.jpg");
                /*background-attachment: fixed;*/
                background-repeat: no-repeat;
                width: 800px;
                height: 600px;
                border: 1px solid #00FF00;
            }
            #icon{
                background-image: url("../img/icon.png");
                background-position:20px 20px;
                width:20px;
                height:20px;
            }
        </style>
    </head>
    <body>
    <div class='title'>背景</div>
    <table>
      <tr>
          <td>background</td>
          <td>	在一个声明中设置所有的背景属性。</td>
      </tr>
        <tr >
            <td width='50%'>background-attachment</td>
            <td>设置背景图像是否固定或者随着页面的其余部分滚动。</td>
        </tr>
        <tr>
            <td>background-color</td>
            <td>设置元素的背景颜色。</td>
        </tr>
        <tr>
            <td>background-image</td>
            <td>设置元素的背景图像。</td> </tr>
        <tr>
            <td> background-position	</td>
            <td>设置背景图像的开始位置。</td>
        </tr>
        <tr>
            <td> background-repeat	</td>
            <td>设置是否及如何重复背景图像。</td>
        </tr>
        <tr>
            <td>background-size	</td>
            <td>规定背景图片的尺寸 有的浏览器不支持。</td>
        </tr>
    </table>
    <div class='title'>代码示例</div>
    <div class='code'>
        <pre>
             &lt;div class='result'&gt;
                &lt;div id='icon'&gt;&lt;/div&gt;
             &lt;/div&gt;
            &lt;style type='text/css'&gt;
                   #icon{
                       background-image: url("../img/icon.png");
                       background-position:20px 20px;
                       width:20px;
                       height:20px;
                   }
             &lt;/style&gt;
        </pre>
    </div>
    <div class='title'>效果</div>
    <div class='result'>
        <div id='icon'></div>
    </div>
    <hr/>
    <div class='title'>代码示例</div>
    <div class='code'>
        <pre>
             &lt;style type='text/css'&gt;
                   #image{
                           background-image: url("../img/image.jpg");
                           /*background-attachment: fixed;*/
                           background-repeat: no-repeat;
                           width: 800px;
                           height: 600px;
                           border: 1px solid #00FF00;
                            }
                     &lt;/style&gt;
                &lt;div class='result'&gt;
                    &lt;div id ='image'&gt;&lt;/div&gt;
                &lt;/div&gt;
        </pre>
    </div>
    <div class='title'>效果</div>
        <div class='result'>
        <div id ='image'></div>
    </div>

    </body>
</html>